<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">发新贴</h2>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="card">
      <div class="card-body">
        <div class="mb-3">
          <label class="form-label"><strong>版块</strong></label>
          <select
            id="article_post_borad"
            type="text"
            class="form-select"
            placeholder="Select a date"
            id="select-tags"
            value=""
          >
            <!-- value取决于现在选择的选项的value -->
            <option value="1">JAVA</option>
            <option value="2">C++</option>
            <option value="3">前端技术</option>
            <option value="4">MySQL</option>
            <option value="5">面试宝典</option>
            <option value="6">经验分享</option>
            <option value="7">招聘信息</option>
            <option value="8">福利待遇</option>
            <option value="9">灌水区</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label"><strong>标题</strong></label>
          <input
            id="article_post_title"
            type="text"
            class="form-control"
            placeholder="请输入标题"
          />
        </div>
        <div class="mb-3" style="height: 680px">
          <label class="form-label"><strong>内容</strong></label>
          <div id="edit-article">
            <!-- textarea也是一个表单控件，当在editor.md中编辑好的内容会关联这个文本域上 -->
            <textarea
              id="article_post_content"
              style="display: none"
            ></textarea>
          </div>
        </div>
      </div>
      <div class="card-footer bg-transparent mt-auto">
        <div class="btn-list justify-content-end">
          <a
            id="article_post_submit"
            href="javascript:void(0);"
            class="btn btn-primary"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M5 12l5 5l10 -10"></path>
            </svg>
            发 布
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 初始化编辑器 -->
<script type="text/javascript">
  $(function () {
    var editor = editormd("edit-article", {
      width: "100%",
      height: "100%",
      // theme : "dark",
      // previewTheme : "dark",
      // editorTheme : "pastel-on-dark",
      codeFold: true,
      markdown: "", // 处理编辑区内容
      //syncScrolling : false,
      saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
      searchReplace: true,
      watch: true, // 关闭实时预览
      htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
      // toolbar  : false,             //关闭工具栏
      // previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
      emoji: true,
      taskList: true,
      tocm: true, // Using [TOCM]
      tex: true, // 开启科学公式TeX语言支持，默认关闭
      // flowChart: true,               // 开启流程图支持，默认关闭
      // sequenceDiagram: true,         // 开启时序/序列图支持，默认关闭,
      placeholder: "开始创作...", // 占位符
      path: "./dist/editor.md/lib/",
    });

    // ================== 处理发贴按钮事件 =======================
    $("#article_post_submit").click(function () {
      let boardIdEl = $("#article_post_borad");
      let titleEl = $("#article_post_title");
      let contentEl = $("#article_post_content");
      // 非空校验
      if (!titleEl.val().trim()) {
        titleEl.focus();
        // 提示
        $.toast({
          heading: "提示",
          text: "请输入帖子标题",
          icon: "warning",
        });
        return;
      }
      if (!contentEl.val().trim()) {
        // 提示
        $.toast({
          heading: "提示",
          text: "请输入帖子内容",
          icon: "warning",
        });
        return;
      }

      // 构造帖子对象
      let postData = {
        boardId: boardIdEl.val(),
        title: titleEl.val(),
        content: contentEl.val(),
      };

      // 提交, 成功后调用changeNavActive($('#nav_board_index'));回到首页并加载帖子列表
      // contentType: 'application/x-www-form-urlencoded'
      $.ajax({
        method: "post",
        url: "/article/create",
        contentType: "application/x-www-form-urlencoded",
        data: postData,
        success: function (body) {
          if (body.code == 1003) {
            $.toast({
              heading: "警告",
              text: body.message,
              icon: "warning",
            });
            jump(body.data);
            return false;
          }
          if (body.code == 0) {
            $.toast({
              heading: "成功",
              text: "发帖成功",
              icon: "success",
            });
            changeNavActive($("#nav_board_index"));
          } else {
            //提示信息
            $.toast({
              heading: "警告",
              text: body.message,
              icon: "warning",
            });
          }
        },
        error: function (body) {
          //提示信息
          $.toast({
            heading: "错误",
            text: "访问出现问题，请与管理员联系. ",
            icon: "error",
          });
        },
      });
    });
  });
</script>
